<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文章类型</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style>
        .popover{
            max-width: 2000px;
        }
        input[type=radio] {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            -webkit-appearance: none;
            background-color: transparent;
            border: 0;
            outline: 0 !important;
            line-height: 20px;
            color: #d8d8d8;
        }
        input[type=radio]:after {
            content: "";
            display:block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 16px;
            color: #fff;
            border: 3px solid #ddd;
            background-color: #fff;
            box-sizing:border-box;
        }
        input[type=radio]:checked:after {
            content: "L";
            transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
            -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
            border-color: #099414;
            background-color: #099414;
        }
    </style>

</head>

<body>

<div class="row">
    <div>
        <ol class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                   role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                主&nbsp;&nbsp; 页</a></li>
            <c:if test="${role!=null}">
                <li><a href="${pageContext.request.contextPath}/role/findAll">角色管理</a></li>
                <li class="active">用户详细</li>
            </c:if>
            <c:if test="${role==null}">
                <li class="active">用户管理</li>
                <li class="active">用户管理</li>
            </c:if>

        </ol>
    </div>
</div>

<div class="container">



    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>用户管理 —— 显示所有用户</small>&nbsp;&nbsp;&nbsp;&nbsp;
                </h1>

            </div>

        </div>
    </div>

        <div class="row">
            <form class="navbar-form" role="search" method="get" action="${pageContext.request.contextPath}/user/findUserAll">
            <div class="col-md-12"> <!-- Contextual button for informational alert messages -->
                <div class="form-group">
                    姓名：<input type="text" class="form-control" name="userTrueName" placeholder="输入包含的名字" value="${systemUser.userTrueName}">
                </div>&nbsp;&nbsp;
                <div class="form-group">
                    <c:if test="${systemUser.userSex=='男'}">
                        性别：<select class="form-control" name="userSex">
                        <option  value="" >--请选择--</option>
                        <option value="男" selected>男</option>
                        <option value="女">女</option>
                    </c:if>
                        <c:if test="${systemUser.userSex=='女'}">
                        性别：<select class="form-control" name="userSex">
                        <option  value="" >--请选择--</option>
                        <option value="男" >男</option>
                        <option value="女" selected>女</option>
                        </c:if>
                        <c:if test="${systemUser.userSex=='' or systemUser.userSex==null}">
                        性别：<select class="form-control" name="userSex">
                        <option  value="" selected>--请选择--</option>
                        <option value="男" >男</option>
                        <option value="女" >女</option>
                        </c:if>

                </select>
                </div>&nbsp;&nbsp;
                <div class="form-group">
                    地址：<input type="text" class="form-control" name="userAddr" placeholder="请输入包含的地址" value="${systemUser.userAddr}">
                </div>&nbsp;&nbsp;
                <div class="form-group">
                    角色：<input type="text" class="form-control" name="roleId" placeholder="请输入包好的角色ID" value="${systemUser.roleId}">
                </div>&nbsp;&nbsp;
                <div class="form-group">
                    <button type="submit" class="btn btn-success">
                        <span class="glyphicon glyphicon-search"></span>查&nbsp;询
                    </button>
                </div>
            </div>

            </form>
        </div>

    <br>

        <div class="row">
            <div class="col-md-4"> <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info" id="addButton">
                    <span class="glyphicon glyphicon-plus"></span>新增用户
                </button>&nbsp;&nbsp;
                <!-- Indicates a successful or positive action -->
                <button type="button" class="btn btn-success" id="batch_delete">
                    <span class="glyphicon glyphicon-trash"></span>批量删除
                </button>&nbsp;&nbsp;
                <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info" onclick="a1()">
                    <span class="glyphicon glyphicon-repeat"></span>刷新
                </button>
            </div>
        </div>

     <br>




    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered">
                <thead>
                <tr class="success">
                    <th><input type="checkbox" id="main-type-id" style="zoom:150%;"/></th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>地址</th>
                    <th>角色</th>
                    <th>联系电话</th>
                    <th>操&nbsp;&nbsp;&nbsp;&nbsp;作</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach var="user" items="${users}">
                    <c:if test="${user.userId!='ererrew'  }">
                        <c:if test="${user.roleId!='werrewew'}">
                            <tr>
                                <td>
                                    <input class="one" type="checkbox" value="${user.userId}" typeName="${user.userName}" name="ids" style="zoom:150%;">
                                </td>
                                <td>${user.userName}</td>
                                <td>${user.userTrueName}</td>
                                <td>${user.userSex}</td>
                                <td>${user.userAddr}</td>
                                <td>${user.roles.roleName}</td>
                                <td>${user.userPhone}</td>
                                <td>
                                    <!-- Indicates caution should be taken with this action -->
                                    <a href="#" type="button" class="btn btn-warning" data-toggle="popover" userId="${user.userId}">分配角色</a>
                                    <br/>
                                    <br/>
                                    <!-- Indicates a successful or positive action -->
                                    <a href="${pageContext.request.contextPath}/user/findByUser/${user.userId}" type="button" class="btn btn-success">编辑</a>
                                        <%--                            &nbsp;--%>
                                    <!-- Indicates a dangerous or potentially negative action -->
                                    <a  href="${pageContext.request.contextPath}/user/deleteUser/${user.userId}"  type="button" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        </c:if>

                    </c:if>

                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>



</div>
<script>
    let a1=function (){
        window.location.href="${pageContext.request.contextPath}/user/findUserAll"
    }


    $("#batch_delete").click(function(){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要删除的项！")
        }else{
            let arr_id=[];
            let articleName=[]
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
                articleName.push($(n).attr("typeName"))
                console.log($(n).val())
                console.log(arr_id)
                console.log(articleName)
            })
            if(confirm("是否删除用户名为【"+articleName.join(",")+"】的记录？")){
                console.log("提交到后台的gid为："+arr_id.join(","))
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/deleteSelectedUser",
                    type:"post",
                    data:{"ids":arr_id.join(",")},
                    success:function (msg){
                        alert(msg);
                        a1();
                    }
                })
            }
        }

    })

    $("#main-type-id").on("click",function(){
        $(".one").prop("checked",$(this).prop("checked"))
    })


    $("table").on("click",".one",function(){
        $("#main-type-id").prop("checked",$(".one").length===$(".one:checked").length)
    })

    $("#addButton").click(function (){
        window.location.href="${pageContext.request.contextPath}/user/findByUser/add"
    })


    $("[data-toggle='popover']").each(function() {
        let element = $(this);
        let userId=$(this).attr("userId")
        element.popover({
            trigger: 'click',
            html: true,
            title: '请选择要分配的角色',
            placement: 'bottom',
            content: function() {
                return content(userId);
            }
        })

    });


    //模拟动态加载内容(真实情况可能会跟后台进行ajax交互)
    function  content(userId)  {
        let data;
        $.ajax({
            url: "${pageContext.request.contextPath}/role/findRoleAll",
            type: "post",
            dataType:"json",
            success:function (roles){
                $.each(roles,function (i,role){
                    let roleState='不可用';
                    if(role.roleState===1){
                        roleState='可用'
                    }
                    console.log(role)
                    let $tr=$("<tr>");
                    $("<td>").append($("<input type='radio' name='roleId'/>").addClass("two").val(role.roleId)).appendTo($tr)
                    $("<td>").text(role.roleName).appendTo($tr)
                    $("<td>").text(role.roleDesc).appendTo($tr)
                    $("<td>").text(roleState).appendTo($tr)
                    $tr.appendTo($("#msgTable tbody"))
                })
            }
        })



        data  =  $(
            '<form action="${pageContext.request.contextPath}/user/updateRole" method="get" id="roleForm">'+
            '<table class="table table-bordered" id="msgTable" style="width: 400px"> '+
            '<thead>'+
            '<tr class="info">'+
            '<th style="width: 50px">请选择</th>'+
            "<th style='width: 50px'>角色名字</th>"+
            "<th style='width: 50px'>角色介绍</th>"+
            "<th style='width: 50px'>角色状态</th>"+
            '</tr>'+
            '</thead>'+
            '<tbody>'+
            '</tbody>'+
            '</table>'+
            '<input type="hidden" name="userId" value="'+userId+'" />'+
            '<button type="submit" class="btn btn-success" id="submitRole" onclick="test()">'+
            ' <span class="glyphicon glyphicon-user"></span>分配角色' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info"  onclick="Cancel()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )
        return  data;
    }
    //模拟悬浮框里面的按钮点击操作
    function  test()  {
        if ($('.two').is(':checked')){
            let msg= confirm("确定要修改角色?")
        }else {
            alert("请选择要更改的角色")
            $('#roleForm').on('submit', function (event) {
                event.preventDefault();
            });
        }

    }
    function Cancel(){
        a1();
    }



</script>
</body>
</html>

